<template>
	<view class="container">
		<!-- 原图 -->
		<view class="section-title">原图</view>
		<image :src="originalImage" class="original-image" mode="aspectFit"></image>

		<!-- 状态栏 -->
		<view class="status-section">
			<view class="status-bar">
				<view class="status-progress" :style="{ width: progress + '%' }"></view>
			</view>
			<view class="status-text">{{ statusText }}</view>
			<view class="time-info">
				<view>创建时间：{{ createTime }}</view>
				<view>更新时间：{{ completeTime }}</view>
			</view>
		</view>

		<!-- 九宫格图片 -->
		<view class="section-title">生成图</view>
		<view class="grid">
			<view class="grid-item" v-for="(img, index) in generatedImages" :key="index">
				<image :src="img.url" mode="aspectFill" class="grid-image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/Channel.js'
	import request from '../../api/index.js'
	import suffixAddress from '../../api/suffixAddress.js'
	export default {
		data() {
			return {
				originalImage: '',
				generatedImages: [],
				progress: 80,
				statusText: '正在生成中...',
				createTime: '',
				completeTime: '',
				status: ''
			};
		},
		onLoad(e) {
			this.showAi(e)
		},
		methods: {
			async showAi(e) {
				let obj = {
					url: api.Channel + suffixAddress.add().imageTasks,
					data: {
						taskId: e.id
					}
				}
				let res = await request(obj)
				console.log(res)
				this.generatedImages = res.data.imgList
				this.originalImage = res.data.image.url
				this.createTime = res.data.createdAt
				this.completeTime = res.data.updatedAt
				this.progress = this.progressPercenta(res.data.status)
				this.statusText = this.statusTexta(res.data.status)
			},
			progressPercenta(status) {
				const map = {
					PENDING: 0,
					RUNNING: 50,
					FAILED: 100,
					SUCCEEDED: 100
				};
				return map[status] || 0;
			},
			// 状态文本
			statusTexta(status) {
				const map = {
					PENDING: '等待处理中...',
					RUNNING: '正在生成中...',
					SUCCEEDED: '已完成',
					FAILED: '失败'
				};
				return map[status] || '未知状态';
			}
		}
	};
</script>

<style lang="less">
	.container {
		padding: 30rpx;
		background: #f5f5f5;
		min-height: 100vh;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.original-image {
		width: 100%;
		height: 400rpx;
		border-radius: 12rpx;
		background: #eee;
		margin-bottom: 40rpx;
	}

	.status-section {
		margin-bottom: 40rpx;
	}

	.status-bar {
		width: 100%;
		height: 20rpx;
		background: #ddd;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.status-progress {
		height: 100%;
		background: #4caf50;
		transition: width 0.3s;
	}

	.status-text {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #333;
	}

	.time-info {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #666;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		justify-content: space-between;
	}

	.grid-item {
		width: 30%;
		aspect-ratio: 1;
		border-radius: 8rpx;
		overflow: hidden;
		background: #fff;
	}

	.grid-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>